 <!DOCTYPE html>
 <html>
 <head>
 	<title></title>
 	<style type="text/css">
 	   .pagination {
        	margin-top:30px;
            clear: both;
            width: 330px;
            height: 33px;
            position: relative;
            margin: 0 auto;
            margin-top: 30px;
            border: 1px solid blue;
        }
        .pagination button {
            width: 90px;
            height: 30px;
            display: block;
            margin-right: 30px;
            float: left;

        }

        .pagination button:nth-child(3) {
            margin-right: 0px;
            float: right;
        }

        .pagination ul li {
            display: block;
            float: left;
            width: 20px;
            height: 20px;

        }
        .active{
            background: #d2d5d8;
        }

        .pagin {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            margin: 0 auto;

        }
 	</style>
 </head>
 <body>
  <div class="pagination">
        <div>
            <button>上一页</button>
            <div class="pagin">
                <ul>
                    <li class="active">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
            <button>上一页</button>
        </div>
</div>
 </body>
 </html>

